今天我們要接續昨天還沒討論完的部份，把動態編輯文件物件模型的功能介紹完。

編輯 HTML

昨天我們有介紹了編輯元素標籤跟屬性的功能，但還有一個功能是可以編輯整個區塊的 HTML。在打開元素面版 (Elements panel) 之後，選擇你要編輯的元素，然後在這個元素的上按滑鼠右鍵，在更多動作選單裡選擇 Edit as HTML 或是使用快捷鍵 (Mac Fn+F2 或是 Windows F2)，這樣就會進入 HTML 編輯模式了，在編輯完成後可以使用快捷鍵 (Mac Cmd+Enter 或是 Windows Ctrl+Enter) 或是用滑鼠在編輯的元素以外的區塊點一下就可以了。這一個編輯的方式可以一次編輯很大的區塊，但是因為不會有自動縮排，編輯起來不是非常方便。

移動元素

這是一個我覺得很直覺並且很酷的功能，你可以直接拖移某個特定的元素：當你選擇你要移動的元素後，使用滑鼠左鍵按住不放，然後拖拉到你想要移動的位置，再放開滑鼠左鍵，這樣這個元素就會被移動到新的位置，並且畫面也會立即更新來反應這個修改。這個功能在做排版的調整時是很方便的。

刪除元素及隱藏某個元素

在選定元素後，使用鍵盤的 Delete 鍵就可以把元素刪除了，有時候其實你不想刪除這個元素，但是想暫時隱藏這個元素，你可以使用鍵盤的 H 鍵來打開及關閉這個元素。有一點要注意的是，這個隱藏後的元素還是會佔有原先的排版空間。

刪除及隱藏元素的功能也都可以透過更多動作選單來使用

複製及貼上元素

這兩個功能就像我們一般使用文字編輯器一樣，當你選定某個要複製的元素後，就可以使用更多動作選單裡的選項，或使用快捷鍵 (Mac Cmd+C 或 Windows Ctrl+C 來複製，然後 Mac Cmd+V 或 Windows Ctrl+V 來貼上 ) 來做複製。而貼上的時候要注意，你所貼的位置，如果你想要把元素貼上在同一個階層，那你要選擇這個元素的父元素，而不是直接貼在這個元素上，不然這個貼上的元素就會變成這個你所選定的元素的子元素 (Children)

在更多動作選單裡的複製裡有不少的選項，但是我自己是都只用快鍵捷複製，其他的功能很少用到 XD

更改擬類別選取項 (Pseudo classes)

常常我們會有一些元素的一些樣式是會在不同的滑鼠操作中有各自的變化 (:active, :hover, :focus 跟 :visited)，我們可以透過開發者工具來開關這個狀態：在選定一個元素後按滑鼠右鍵，這時候會看到這幾個擬類別選取項的選項在更多動作選單中，點選其中一個 ( 同一個元素可以選擇多個 )，這時候你就會看到這個元素在各個不同狀態的畫面樣式。這個功能除了在這邊可以打開之外，也可以透過樣式控制台 (Styles panel) 來開關，之後我們介紹樣式控制台時會再說明。

關閉擬類別選取項的方式就是從更多動作選單裡再選取這個選取項一次

透過上述的方法打開擬類別狀態時，在打開的 DOM 元素的左邊會出現一個橘色小點

捲動至可視範圍 (Scroll into view)

這個功能是當有時你在檢視某個元素時，但是這個元素現在不在你元窗可以看到的範圍 (有可能這個頁面很長像是 Facebook 或是 Twitter 的頁面 ) 因為捲軸太長了，這時候這個功能就很方便，可以讓你直接捲動到這個元素所在的可視範圍內。

小結

今天我們把剩下的幾個動態編輯文件物件模型的功能介紹完了，相信經過這兩天的介紹大家對這個元素面版應該就不再陌生了，接下來幾天我們仍然會在元素面版中，但是這次我們要介紹的是樣式控制台，當我們介紹完樣式控制台後，你就會有完整動態編輯文件物件模型及所有樣式相關的能力，只要再加上一點時間的練習及經驗，以後除錯 HTML 及 CSS 功力一定不再一樣 :)